<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>问答-KuangStudy</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
	<script th:src="@{/ckeditor/ckeditor.js}" type="text/javascript"></script>
	<script th:src="@{/ckeditor/config.js}" type="text/javascript"></script>
	<style>
		.nav-underline .nav-link {
			padding-top: .75rem;
			padding-bottom: .75rem;
			font-size: .875rem;
			color: #6c757d;
		}
	</style>
</head>
<body style="background: #f2f2f2;">

<!-- 导航栏 -->
<div th:replace="~{common/header::header(activeUrl='question')}"></div>

<main role="main" class="container mt-3 p-3 bg-white rounded">
	<div class="row">
		<div class="col-md-12 blog-main" id="app">
			<div class="col-md-12 order-md-1">
				<h4 class="mb-3">发布问题</h4>
				<div class="row">
					<div class="col-md-10 mb-3">
						<label for="firstName">问题标题</label>
						<input v-model="title" type="text" name="title" class="form-control" id="firstName" value="" required>
					</div>

					<div class="col-md-2 mb-3">
						<label for="country">标签</label>
						<select v-model="checkCategory" name="categoryId" class="custom-select d-block w-100" id="country">
							<option v-for="(v,k) in category" :key="k" v-text="v"
							>

							</option>
						</select>
					</div>
				</div>
				<textarea name="content" id="editor"></textarea>
					<br/>
					<p style="float: right">
						<el-button type="primary" @click="submit" round>提交</el-button>
					</p>
				</div>
			</div>
			<div v-html="text.getData()"></div>
		</div>
</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

<script th:src="@{/editormd/editormd.js}"></script>
<script>

    const vm = new Vue({
        el: '#app',
        data: {
            text: "",
	        category: [],
	        checkCategory: "",
	        title: ""
        },
        methods: {
            editor() {
                console.log(this.text.getData());
            },
            open() {
                this.$message('这是一条消息提示');
            },

            openVn() {
                const h = this.$createElement;
                this.$message({
                    message: h('p', null, [
                        h('span', null, '请完善信息 '),
                        h('i', { style: 'color: teal' }, 'error')
                    ])
                });
            },
            submit(){
                let checkCategory = this.checkCategory;
                let text = myEditor.getData();
                let title = this.title;
                if(! checkCategory || !text || !title){
                    this.openVn();
                    return;
                }
				const json = {'title': title,'text': text,'category': checkCategory};
                axios({
	                url: "/question/write",
	                method: "POST",
	                data: json
                }).then((resp)=>{
					console.log(resp);
                    const code = resp.data.code;
                    if(code == 20000){
                        alert("发布成功！")
						//成功！
                        window.location.href = '/question/list'
                    }else {
                         alert("发布错误！")
                    }
                })

            }

        },
	    mounted(){
			// 获取问题类型
		    axios({
			    url: "/question/getCategory",
			    method: "POST"
		    }).then((resp)=>{
		        this.category = resp.data;
		        this.checkCategory = resp.data[0]
		    })
	    },
        watch: {
        }
    })
    var myEditor  = CKEDITOR.replace('editor', {
        filebrowserImageUploadUrl :"/uploadText?",
        removePlugins:'elementspath,resize',
        codeSnippet_theme: 'zenburn',
        height:'600'
    });

    /*将编辑器的语言设置为中文*/
    config.language = 'zh-cn';
    /*去掉图片预览框的文字*/
    config.image_previewText=' '; //预览区域显示内容
    /*开启工具栏“图像”中文件上传功能，后面的url为图片上传要指向的的action或servlet*/
    config.filebrowserImageUploadUrl= "/uploadText";

</script>
</body>
</html>
